<template>
  <div class="city">
      <header>
          <span>ele.me</span>
          <span class="loginAndReg">
              <button @click="loginTo">登陆</button>
              <button @click="loginTo">注册</button>
          </span>
      </header>
      <div class="guess">
          <span>当前定位城市:<span v-text="guessCity"></span></span>
          <p @click="jumpSearch(nowGuess)" v-text="nowGuess.name"></p>
      </div>
      <div class="hot">
          <p>热门城市</p>
          <ul v-if="showHot" class="hotCityUl">
              <li v-for="(v,i) in hotCity" :key="i">
                  <!-- <router-link :to="{path,query:{id:v.id,name:v.name}}" v-text="v.name"></router-link> -->
                  <span @click="jumpSearch(hotCity[i])" v-text="v.name"></span>
              </li>
          </ul>
      </div>
      <div class="group">
          <ul>
              <li v-for="(v,i) in allCity" :key="i">
                  <p v-text="i" class="alphabet"></p>
                  <ul class="cityName">
                      <li v-for="(v1,i1) in v" :key="i1" @click="jumpSearch(v1)" v-text="v1.name">
                      </li>
                  </ul>
              </li>
          </ul>
      </div>
  </div>
</template>

<script>
import { mapState} from "vuex";
import { Loading } from 'element-ui';
let loadingInstance //定义一个Loading 加载
export default {
    name:"City",
    data(){
        return{
            path:'/search',
            showHot:false,//是否展示页面
            // 当前城市
            guessCity:"定位不准时，请在城市列表中选择",
            nowGuess:{},
            hotCity:{},
            allCity:{}
        }
    },
    created(){
        //console.log(this.eleUrl)
        loadingInstance = Loading.service({ fullscreen: true });
        this.getGuessCity(),
        this.getHotCity(),
        this.getGroupCity()
    },
    methods:{
        jumpSearch(city){
            this.$store.commit("getCity",city);
            this.$router.push({
                name:"search"
            })
        },
        loginTo(){
            this.$router.push({
                name:'login'
            })
        },
        //发起网络请求
        //获取当前城市
        getGuessCity(){
            //const api="https://elm.cangdu.org/v1/cities?type=guess"
            const api=this.eleUrl.guess;
            this.$http.get(api).then((res)=>{
                //console.log(res.data);
                this.nowGuess=res.data;
            })
        },
        //获取热门城市
        getHotCity(){
           //const api="https://elm.cangdu.org/v1/cities?type=hot"
            const api=this.eleUrl.hot
            this.$http.get(api).then((res)=>{
                //console.log(res.data)
                this.showHot=true;
                this.hotCity=res.data;
                //
                loadingInstance.close();
            })
        },
        //获取所有城市
        getGroupCity(){
            let api=this.eleUrl.group;
            this.$http({
                url:api,
                methods:"get"
            }).then((res)=>{
               let sortArr= Object.keys(res.data).sort();
               //map() 方法按照原始数组元素顺序依次处理元素。
               let newArr=sortArr.map((item)=>{
                   this.allCity[item]=res.data[item];//相当于res.data["A"]
               });
            })
        }
    },
    computed:{
        ...mapState(["eleUrl"])
    }
}
</script>

<style scoped>
    .city{
        background-color: #EDEDED;
        width: 100%;
        height: 100%;
        font-size: .15rem;
    }
    header{
        height:.5rem;
        width: 3.75rem;
        background-color:rgb(80, 143, 238);
    }
    header>span{
        color:white;
        line-height: .5rem;
        margin-left:.1rem;
    }
    header button{
        background-color:rgb(80, 143, 238);
        border: none;
        color: white;
        height: .25rem;
    }
    .loginAndReg{
        display: inline-block;
        float: right;
    }
    /* 当前定位城市 */
    .guess{
       width: 3.75rem;
       background-color: #fff;
    }
    .guess>span{
        display: inline-block;
        margin: .1rem;
        color: gray;
        font-size: .15rem;
    }
    .guess>span>span{
        font-size: .1rem;
        margin-left:.7rem ;
    }
    .guess>p{
        font-size: .18rem;
        height: .3rem;
        line-height: .3rem;
        padding:.1rem ;
        border-top:1px solid gray ;
        border-bottom:1px solid gray ;
    }
    /* 热门城市 */
    .hot{
        background-color: #fff;
        margin-top: .15rem;
    }
    .hot>p{
        padding: .1rem;
        border-top:2px solid #ddd ;
    }
    .hotCityUl{
        display: flex;
        flex-wrap: wrap;
    }
    .hotCityUl>li{
        border: 1px solid #ddd;
        width: 24%;
        padding: .1rem 0;
        text-align: center;
        color: rgb(37, 152, 190);
        cursor:pointer;
    }
    /* 所有城市 */
    .cityName{
        background-color: #fff;
        display: flex;
        flex-wrap: wrap;
    }
    .cityName>li{
        width: 24.5%;
        height:.4rem;
        line-height: .4rem;
        text-align: center;
        border: .3px solid #ddd;
        overflow: hidden;
    }
    .alphabet{
        width: 100%;
        height: .3rem;
        line-height: .3rem;
        border: 1px solid #ccc;
        background-color: #fff;
        padding-left:.1rem;
    }
</style>